<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts';
// 路线名称
const dayFlow = ref([30, 40, 50, 60, 70])
const weekFlow = ref([210, 280, 350, 420, 490])
const monthFlow = ref([240, 320, 400, 480, 560])
let timer;
let index = 1
// 副本
const dayFlowCopy = ref([30])
const weekFlowCopy = ref([210])
const monthFlowCopy = ref([240])
// 获取dom
const top = ref()
const middle = ref()
const myChart = ref(null);
const myPie = ref(null)
onMounted(() => {
  myChart.value = echarts.init(top.value);
  myChart.value.setOption(
    {
      title: {
        text: '线路站点数量',
        textStyle: {
          color: '#1DDAFD',
          fontWeight: 'bold',
          lineHeight: 40,
          fontSize: '30',
          textBorderColor: '#000'
        },
        left: '0%'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b0}<br /> 全线总长: {c0} km<br />站点数量: {c1} 座',
        textStyle: {
          color: '#555888'
        }
      },
      legend: {
        textStyle: {
          color: '#1DDAFD',
          fontWeight: 'bold',
          lineHeight: 40,
          textBorderColor: '#000'
        },
        right: '50'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      color: [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#defef9' // 0% 处的颜色
        }, {
          offset: 1, color: '#00ffd5' // 100% 处的颜色
        }],

      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#faf2cd' // 0% 处的颜色
        }, {
          offset: 1, color: '#fad105' // 100% 处的颜色
        }],

      }],
      xAxis: [
        {
          type: 'category',
          data: ['3号线', '2号线', '11号线', '13号线', '4号线', '8号线', '6号线', '7号线']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '线路全长 (Km)',
          type: 'bar',
          data: [24.8, 30.8, 58.4, 70.3, 30.9, 60.7, 32.1, 29.6]
        },
        {
          name: '站点数量(座)',
          type: 'bar',
          data: [22, 28, 22, 23, 25, 18, 22, 20],
          emphasis: {
            focus: 'series'
          },
        },
      ]
    }
  )
})
// 节流阀
let num = 0
function add() {
  if (num === 0) {
    dayFlowCopy.value.push(dayFlow.value[index])
    weekFlowCopy.value.push(weekFlow.value[index])
    monthFlowCopy.value.push(monthFlow.value[index])
    index++
    if (index > dayFlow.value.length) {
      // index = 1
      // dayFlowCopy.value = [30]
      // weekFlowCopy.value = [210]
      // monthFlowCopy.value = [240]
      num = 1
    }
    myPie.value.setOption({
      series: [
        {
          name: '日客流量（万人次）',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          data: dayFlowCopy.value
        },
        {
          name: '周客流量（万人次）',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          data: weekFlowCopy.value
        },
        {
          name: '月客流量（万人次）',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          data: monthFlowCopy.value
        },
      ]
    })
  }
}
onMounted(() => {
  myPie.value = echarts.init(middle.value)
  myPie.value.setOption({
    title: {
      text: '2015-2019年  人流量变化',
      textStyle: {
        color: '#0C8FED',
        fontWeight: 'bold',
        lineHeight: 40,
        textBorderColor: '#000'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['日客流量（万人次）', '周客流量（万人次）', '月客流量（万人次）'],
      left: '35%',
      textStyle: {
        color: '#0C8FED',
        fontWeight: 'bold',
        lineHeight: 40,
        textBorderColor: '#000'
      }
    },
    grid: {
      left: '1%',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['2015年', '2016年', '2017年', '2018年', '2019年']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '日客流量（万人次）',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        data: dayFlowCopy.value
      },
      {
        name: '周客流量（万人次）',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        data: weekFlowCopy.value
      },
      {
        name: '月客流量（万人次）',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        data: monthFlowCopy.value
      },
    ]
  })

  timer = setInterval(() => {
    add()
  }, 450)
})
onBeforeUnmount(() => {
  if (num === 0) {
    clearInterval(timer)
  }
})
</script>
<template>
  <div class="middle">
    <div class="top" ref="top"></div>
    <div class="middle" ref="middle"></div>
  </div>
</template>
<style scoped lang="less">
@import './index.less';
</style>